<template>
	<view class="evaluatePage">
		<view class="part1">
			<image src="../../static/return2.png" mode=""></image>
			<text>发表评价</text>
		</view>
		<pingjia class="zujian"></pingjia>
		<view class="part3">
			<text>酒店环境</text>
			<view class="pic">
				<starts size="30" v-model="value1"></starts>
			</view>
			<view class="descr">{{des1}}</view>
		</view>
		<view class="part4">
			<text>服务态度</text>
			<!-- 五星好评组件 -->
			<view class="pic">
				<starts size="30" v-model="value"></starts>
			</view>
			<view class="descr">{{des2}}</view>
		</view>
		<view class="part5">
			<form>
					<!-- maxlength="80" 输入的字符数量限制 -->
					<!-- auto-height 根据输入内容来改变高度 -->
				<textarea v-model="commenttext" class="a" maxlength="auto" auto-height></textarea>
			</form>
		</view>
		<button class="send" @click="addComment">提交评价</button>
	</view>
</template>

<script>
	import pingjia from '../../components/invitation.vue'
	import starts from "../../uni_modules/uni-rate/components/uni-rate/uni-rate.vue"
	export default {
		data() {
			return {
				value1: 5,
				value: 5,
				commenttext:""
			}
		},
		components: {
			pingjia,
			starts,
		},
		methods: {
			addComment() {
				uni.request({
					url:"http://127.0.0.1:3030/addcomment",
					method:"POST",
					data:{
						value:this.value,
						commenttext:this.commenttext
					},
					success:(res)=>{
						let result = res.data.msg
						if(result === "评论保存成功"){
							uni.showToast({
								title:result,
								icon:'success'
							})
					
						}else if(result === "评论保存不成功" || result === "评论内容不能为空"|| result === "评论星级不能为空") {
							uni.showToast({
								title:result,
								icon:'error'
							})
						}
					}
				})
			}
			
		},
		computed:{
			des1(){
				let str
				if(this.value1 >4){
					str = '很好'
				}else if(this.value1 == 4){
					str = '好'
				}else if(this.value1 == 3){
					str = '一般'
				}else if(this.value1 == 2){
					str = '较差'
				}else if(this.value1 < 3){
					str = '差'
				}
				return str
			},
			des2(){
				let str
				if(this.value2 >4){
					str = '很好'
				}else if(this.value2 == 4){
					str = '好'
				}else if(this.value2 == 3){
					str = '一般'
				}else if(this.value2 == 2){
					str = '较差'
				}else if(this.value2 < 3){
					str = '差'
				}
				return str
			}
			
		}
	}
</script>

<style>
.evaluatePage{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color:rgba(43,187,286,0.3);
}
.part1{
	display: flex;
	height: 50px;
	align-items: center;
}
.part1 image{
	width: 60rpx;
	height: 45px;
}
.part1 text{
	margin-left: 200rpx;
	font-size: 40rpx;
	
}
.send{
	width: 98%;
	height: 50px;
	text-align: center;
	background-color:#FDD371;
	color: aliceblue;
	font-size: 40rpx;
	margin-top: 40rpx;
}
.zujian{
	margin: 20rpx;
}
.part3{
	display: flex;
	align-items: center;
	font-size: 40rpx;
}
.pic image{
	width: 55rpx;
	height: 35px;
}
.pic{
	display: flex;
	margin-left: 50rpx;
}
/* 描述 */
.descr{
	margin-left: 50rpx;
}
.part4{
	display: flex;
	align-items: center;
	font-size: 40rpx;
}
.part5{
	height: 500rpx;
	border: 5rpx solid #cccccc;
}
.a{
	width: 100%;
}
</style>
